Next.js Crash Course with React and Tailwind CSS

Name: Next.js Crash Course with React and Tailwind CSS
Rating: 4.0 (229 reviews)

Learn the basic fundamentals of Next.js Application with Reactjs and TailwindCSS

Created byImran Sayed

Last updated 10/2022

English

English [Auto],

What you'll learn

NextJS with React along with deployment

Course content

1 section • 8 lectures • 51m total length

Introduction to Next.js3:47
Explore Next.js, a production framework offering server-side rendering, image optimization, internationalization, analytics, and zero-configuration setup. Learn fast refresh, file routing, built-in CSS, and incremental static regeneration for efficient apps.
Installation and Setup of Next.js Application5:57
learn to install and set up a Next.js application using create next app, configure yarn, and start a development server on localhost:3000, exploring pages, styles, and the app component.
Setup Tailwind CSS in Next.js13:44
Install and configure Tailwind CSS in Next.js, including PostCSS setup, purge settings, and next.config.js, then build a header and layout using Tailwind utilities.
Creating React Components in NextJS2:15
Create a React component in Next.js by building a photo component, exporting it, and importing it into the layout to render within the page.
Link Routes and Pages in NextJS5:38
Create pages in next.js by adding components under the pages directory, export a default page, and link them with the next/link component for seamless internal navigation without full page reload.
Creating Layouts in Next.js3:34
Create reusable layouts in Next.js by encapsulating header and footer in a layout component, pass page content as children, and render consistently across home and about pages.
Customize Tailwind Configuration and Add Navigation in NextJS9:10
Customize Tailwind configuration to add a custom min-height utility and implement Next.js navigation with Link, integrating a header and footer layout across home, about, events, and contact pages.
Deploy your Next.js app to Vercel and creating APIs in NextJS7:21
Deploy your Next.js app to Vercel by initializing a GitHub repository, pushing code, and configuring the project for live deployment while creating API routes under pages/api to return json data.

Requirements

Should know basics of JavaScript

Description

SEO helps you to find new users and promote your brand on the top pages of search engines. Adding features like SSR( Server Side Rendering ) and routing can be tedious. Next.js which is a React framework offers many such features out of the box.

In this course, you will learn the basic of creating a front-end React application with Next.js in simplest of manner. You will also learn how to setup Tailwind CSS and use to in your React components.

We will learn:

1 - Introduction to Next.js

2 - Installation and Setup of Next.js Application

3 - Setup Tailwind CSS in Next.js

4 - Link Routes and Pages in NextJS

5 - Link Routes and Pages in NextJS

6- Creating Layouts in Next.js

7 - Customize Tailwind Configuration and Add Navigation in NextJS

8- Deploy your Next.js app to Vercel and creating APIs in NextJS

By the end of the session you would be able to:

1. Create a front-end application in React using Next.js

2. Grasp the concept of Routing, Links, Components, Pages, using and configuring Tailwindcss

3. And Deploy your serverless application on a vercel for free using Github with continuous Integration.

Benefits of learning and Using Next.js
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
It offers you Image Optimization , Incremental Static Regeneration etc

Who this course is for:

Beginners, Advanced